<template>
  <div style="height: calc(100vh - 160px); overflow: hidden">
    <crumbs @goBack="() => {}" :superiorMenu="['仓库报表']" currentMenu="实时库存表" style="margin-bottom: 12px">
      <span slot="content">
        <div class="topSearch">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
            <a-form-model-item label="出入库日期">
              <a-range-picker
                v-model="queryParam['startDate']"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @panelChange="(a, b) => topSearchDate(a, b, item.searchIndex)"
                style="width: 100%"
                show-time
              />
            </a-form-model-item>
            <a-button @click="handleShowFilter" icon="filter" style="margin-top: 4px">
              筛选 <span style="color: #1890ff; margin-left: 5px">{{ searchNum }}</span></a-button
            >
          </a-form-model>
        </div>
      </span>
    </crumbs>
    <!-- 头部模块 -->
    <a-card :bordered="false">
      <div class="topBox">
        <div class="itemBox" v-for="(item, index) in topArray" :key="index">
          <div class="rightBox">
            <div class="rightBot">{{ item.title }}</div>
            <div class="rightTop">{{ item.number }}</div>
          </div>
        </div>
      </div>
    </a-card>
    <div style="height: 12px; background: #f0f2f5"></div>
    <a-card :bordered="false" style="height: calc(100vh - 260px)">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
        <a-button @click="handleUpload(selectionRows)" type="primary" style="float: right" icon="upload">导出</a-button>
      </div>
      <!-- 设置列 -->
      <SetColumn
        columnName="设置列"
        ref="SetColumn"
        v-if="showSetColumn"
        @sureBtn="sureBtn"
        @cancelBtn="showSetColumn = false"
      />
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          rowKey="goodsId"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :scroll="{ x: computedX, y: 'calc(100vh - 338px)' }"
        >
          <span slot="goodsCode" :text="text" slot-scope="text, record">
            <a @click="handleDetail(record)">{{ text }}</a>
          </span>
          <!-- <span slot="actions" slot-scope="text, record">
            <a v-if="record.inventoryStatus == 'running'" @click="handleEdit(record)">继续盘点</a>
            <a v-else @click="handleDetail(record)">详情</a>
          </span> -->
          <!-- title搜索条件开始 -->
          <!-- 输入框搜索 -->
          <div v-for="(item, i) in filterDropdownList" :key="i" style="display: flex; padding: 8px">
            <template :slot="item.scopedSlots.filterDropdown" slot-scope="{ column }">
              <a-input
                v-if="item.scopedSlots.filterDropdown === 'searchDropdown'"
                :placeholder="'请输入'[column.title]"
                v-model="queryParam[column.searchIndex]"
                style="width: 188px"
              />
              <a-tree-select
                v-if="item.scopedSlots.filterDropdown === 'selectDropdownTree'"
                allow-clear
                v-model="queryParam[column.searchIndex]"
                :multiple="false"
                placeholder="请选择"
                style="width: 200px !important"
                :tree-data="column.options"
                :replaceFields="replaceFields"
                :show-checked-strategy="SHOW_PARENT"
                search-placeholder="请选择"
                @change="
                  (a, b) => {
                    queryParam[`${column.searchIndex}Text`] = b[0]
                  }
                "
              />
              <a-select
                :mode="column.multi ? 'multiple' : 'default'"
                v-if="item.scopedSlots.filterDropdown === 'selectDropdown'"
                :placeholder="'请选择'[column.title]"
                allowClear
                style="width: 188px"
                v-model="queryParam[`${column.searchIndex}all`]"
                @change="(a) => changeSelect(a, column.searchIndex)"
                :labelInValue="true"
              >
                <a-select-option v-for="(items, i) in column.options" :key="i" :value="items.key">{{
                  items.label
                }}</a-select-option>
              </a-select>
              <a-button
                v-if="item.scopedSlots.filterDropdown !== 'tooltip'"
                type="primary"
                style="width: 80px; margin-left: 20px"
                @click="searchQuery"
              >
                搜索
              </a-button>
            </template>
          </div>
          <a-icon slot="searchIcon" type="search" />

          <!-- title搜索条件结束 -->
        </a-table>
      </div>
      <!-- table区域-end -->
      <!-- 底部分页 -->
      <div
        :style="{
          position: 'fixed',
          bottom: 0,
          right: 0,
          zIndex: 2,
          width: '100%',
          background: '#fff',
          padding: '24px',
        }"
      >
        <div style="display: inline-block; float: right">
          <a-pagination
            :total="ipagination.total"
            v-model="ipagination.current"
            :page-size-options="ipagination.pageSizeOptions"
            :page-size="ipagination.pageSize"
            @change="onChangePage"
            @showSizeChange="onChangePage"
            show-quick-jumper
            show-size-changer
          />
        </div>
      </div>
      <!-- 选择表格条数 -->
      <div class="tableSelect" v-if="this.dataSource.length > 0">
        <a-checkbox
          :checked="selectedRowKeys.length == this.dataSource.length ? true : false"
          :indeterminate="
            selectedRowKeys.length != 0 && selectedRowKeys.length != this.dataSource.length ? true : false
          "
          @change="selectAll"
        ></a-checkbox>
        <span style="margin: 0 20px">{{ `已选 ${selectedRowKeys.length}/${this.dataSource.length} 项` }}</span>
        <a style="margin-right: 20px" @click="onClearSelected">清空</a>
      </div>
      <!-- 侧边筛选 -->
      <a-drawer
        width="500"
        height="100vh"
        :bodyStyle="{ background: '#f5f5f5', padding: '0' }"
        :closable="true"
        :visible="showFilter"
        @close="showFilter = false"
      >
        <formSearch ref="dataSearch" @searchDate="searchDate" />
      </a-drawer>
    </a-card>
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { TreeSelect } from 'ant-design-vue'
import { APILX } from '@/api/requestLx'
import { tableMixinReport } from '@/mixins/tableMixinReport'
import { columns, allColumn, getTypeList } from './columnRealTimeInventory.js'
import { map } from 'xe-utils/methods'
const SHOW_PARENT = TreeSelect.SHOW_PARENT

const actionArr = [
  {
    fixed: 'right',
    title: '操作',
    align: 'left',
    dataIndex: 'actions',
    width: 150,
    scopedSlots: { customRender: 'actions' },
  },
]
export default {
  mixins: [tableMixinReport],
  name: 'budgetReport', //月度库存收支表
  data() {
    return {
      SHOW_PARENT,
      // treeData树结构
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      // 头部配置
      topArray: [
        {
          title: '期初数总计',
          number: '0',
        },
        {
          title: '入库数总计',
          number: '0',
        },
        {
          title: '出库数总计',
          number: '0',
        },
        {
          title: '期末数总计',
          number: '0',
        },
      ],
      // 表头
      columns: columns.map((e) => {
        e.align = 'left'
        return e
      }),
      actionArr,
      allColumn: allColumn.map((e) => {
        e.align = 'left'
        return e
      }),
      url: {
        list: '/wms/wmsReportForms/monthInOutPageList',
      },
      tableData: {},
      EntityName: 'H727S-11CEG-AS2XM-ABP9C-MT8H8kjsdfh-budgetReport', //用于表头设计,值保证是唯一的即可
    }
  },
  computed: {},
  created() {
    getTypeList()
    this.initData()
  },
  methods: {
    topSearchDate(a, b, key) {
      if (a.length == 0) {
        this.queryParam[`startDate`] = ''
        this.queryParam[`endDate`] = ''
        this.dateForm[key] = []
        return
      }
      this.dateForm[key] = b
      this.queryParam[`startDate`] = b[0]
      this.queryParam[`endDate`] = b[1]
      this.searchDate(this.queryParam, this.dateForm, '', '')
    },
    initData() {
      APILX.getInOutNum().then((res) => {
        if (res.success) {
          this.topArray[0].number = res.result.typeNum || '0'
          this.topArray[1].number = res.result.goodsNum || '0'
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    // 导出
    handleUpload(e) {
      let that = this
      if (!e || e.length === 0) {
        that.$antdConfirm({
          title: `确定导出?`,
          onOk() {
            console.log(e, '导出全部数据')
            //  daochujiekou(e).then((res) => {
            //   if (res.code === 200) {
            //     that.$antdMessage.success(res.message)
            //   } else {
            //     that.$antdMessage.error(res.message)
            //   }
            // })
          },
          onCancel() {},
        })
      } else {
        that.$antdConfirm({
          title: `确定要导出选中的数据?`,
          onOk() {
            console.log(e, '导出选中数据item')
            //  daochujiekou(e).then((res) => {
            //   if (res.code === 200) {
            //     that.$antdMessage.success(res.message)
            //   } else {
            //     that.$antdMessage.error(res.message)
            //   }
            // })
          },
          onCancel() {},
        })
      }
    },
    topSearch() {
      // 调用tableMixin中的loadData方法
      // this.loadData('1')
      this.searchDate(this.queryParam, this.dateForm, '', '')
      // this.searchQuery()
    },
    goNextPage(item) {
      let pathUrl = ''
      if (item.applyType == 'waiterDeal') {
        pathUrl = '/waiterApply'
      } else {
        pathUrl = '/otherApply'
      }
      let paramsObj = {
        applyType: item.applyType,
      }
      this.$openWay(this, false, pathUrl, paramsObj)
    },
    handleAdd() {
      this.$openWay(this, true, '/stockCheckForm')
    },
    handleEdit(v) {
      this.$openWay(this, true, '/stockCheckForm', { id: v.id })
    },
    handleDetail(v) {
      this.$openWay(this, true, '/warehouseManagement/goodsManagement/goodsManagementDetail', { id: v.id })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
div.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 16px;
  box-sizing: border-box;
  padding: 23px 0;
  background: #fff;
  div.itemBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: 44px;
    padding: 0px 60px;
    position: relative;
    border-right: 1px solid #eeeeee;

    div.rightBox {
      text-align: center;
      height: 44px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      margin-left: 16px;
      div.rightTop {
        font-size: 24px;
        color: #191f25;
        line-height: 24px;
        margin-top: 12px;
      }

      div.rightBot {
        font-size: 14px;
        color: #888888;
      }
    }
  }
}
.topBox .itemBox:last-child {
  border: none;
}
.topSearch {
  padding: 0 0 10px 38px;
}
</style>
